<%--
  Created by IntelliJ IDEA.
  User: TT
  Date: 2020/5/17
  Time: 19:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div class="thl-add" data-update="thl-update">
    <div class="container-fluid mt-2" id="supplier-add">
        <form autocomplete="off" style="min-width: 1014px" data-id="${map.id}">
            <!-- 供应商基础信息 -->
            <div class="row">
                <div class="col font-weight-bold">
                    <label><span class="mr-3" style="border: 2px solid rgb(35,151,243)"></span>供应商基础信息</label>
                </div>
            </div>
            <!-- 供应商基础信息输入框 -->
            <div class="row">
                <div class="col">
                    <div class="form-row">
                        <div class="form-group col-3">
                            <label><span class="text-danger">*</span>供应商类型</label>
                            <div class="form-group">
                                <select class="form-control" name="typeId" data-name="typeId">
                                    <option class="text-danger" hidden value="0">请选择供应商类型</option>
                                    <c:forEach var="list" items="${map.typeList}">
                                        <option value="${list.id}" ${list.supplierType eq map.supplierType ? 'selected':'test'}> ${list.supplierType}</option>
                                    </c:forEach>
                                </select>

                            </div>
                        </div>
                        <div class="form-group col-3 offset-5">
                            <label><span class="text-danger">*</span>供应商名称</label>
                            <input class="form-control" name="supplierName" placeholder="请输入供应商名称" data-name="supplierName1" value="${map.supplierName}">
                        </div>
                    </div>
                    <div class="form-row">

                        <div class="form-group col">
                            <label><span class="text-danger">*</span>地址</label>

                            <div data-toggle="distpicker" class="form-row">
                                <div class="form-group">
                                    <select data-Province="${map.pro}" class="form-control" name="pro" data-name="pro"></select>
                                </div>
                                <div class="form-group">
                                    <select data-city="${map.city}" class="form-control" name="city" data-name="city"></select>
                                </div>
                                <div class="form-group">
                                    <select data-district="${map.dis}" class="form-control" name="district" data-name="district"></select>
                                </div>

                                <div class="form-group">
                                    <input class="form-control" name="detailAddress" placeholder="请输入供应商详细地址" value="${map.detailAddress}" data-name="detailAddress" required>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

            <!-- 联系人信息 -->
            <div class="row">
                <div class="col font-weight-bold">
                    <label><span class="mr-3" style="border: 2px solid rgb(35,151,243)"></span>联系人信息</label>
                </div>
            </div>
            <!-- 联系人信息输入框 -->
            <div class="row">
                <div class="col">
                    <div class="form-row">
                        <div class="form-group col-md-3">
                            <label><span class="text-danger">*</span>姓名</label>
                            <input class="form-control" name="contactName" placeholder="请输入联系人姓名" value="${map.contactName}" data-name="contactName" required>
                        </div>
                        <div class="form-group col-md-3 offset-5">
                            <label><span class="text-danger">*</span>联系电话</label>
                            <input class="form-control" name="phone" placeholder="请输入联系电话"  data-name="phone" value="${map.phone}" required>
                        </div>
                    </div>

                </div>
            </div>
            <hr />
            <!-- 供应商物品 -->
            <div class="row mb-3">
                <div class="col-3 font-weight-bold">
                    <label class="bg-light text-info rounded-right pr-2" style=""><span class="mr-3" style="border: 2px solid rgb(35,151,243)"></span>供应商物品信息</label>
                </div>
                <div class="col-1 offset-8">
                    <button name="addGoods" class="btn btn-outline-primary" type="button" >新增</button>
                </div>
            </div>
            <%-- 添加供应商物品的表格 --%>
            <div name="thl-supplierGoods1">
                <table class="table border text-center">
                    <tr>
                        <td>商品编码</td>
                        <td>商品品名</td>
                        <td>计量单位</td>
                        <td>编辑</td>
                    </tr>
                </table>
            </div>

            <!-- 提交按钮 -->
            <div class="row mb-3">
                <div class="col-1 offset-11">
                    <button class="btn btn-outline-primary" type="button" name="thl-addSupplier">提交</button>
                </div>
            </div>

        </form>
    </div>
</div>

<div name="thl-goodsModal">
</div>
<script src="${pageContext.request.contextPath}/static/lib/distpicker/distpicker.js"></script>
<script src="${pageContext.request.contextPath}/app-assets/js/components-modal.js"></script>
<script>
    (function () {
        //将get请求传回的供应商主键绑定在此页面的div里
        $('[data-update="thl-update"]').data('id',${map.id});
        //商品信息是一个json的数组对象
        let trArray = ${map.goodsInfoList};
        //定义一个变量保存商品的编号
        let trData =[];
        //循环遍历数组对象，取出商品编号
        for(let i in trArray){
           trData.push(String(trArray[i].id))
        }
        //配置表格
        //定义要显示的列名
        let columns = [{field:"id",title:"商品编码"},
                        {field:"goodsName",title:"商品名称"},
                        {field:"unit", title:"计量单位"}];
        //定义表格的数据
        let options = {
            isPaging: false,
            node: "[name='thl-supplierGoods1']",
            datas: trArray,
            pageVO: {
                pageIndex:-1,
                selectObj:undefined
            },
            columns: columns,
            isEdit: true,
            fontAwesome:{ 'fa fa-trash-o':'删除'},
            fontAwesomeClick:{
                "删除":function (event,obj,node,parent) {
                    //当点击删除图标时，删除当前的节点。 parent表示当前的tr节点
                    // $(parent).remove();
                    // //同时删除trArray中对应的该对象和主键数组中对应的主键值
                    // //将tr节点转化为对象
                    // let trObj =  getObj(parent,columns,true,true,true);
                    // // 遍历trArray数组中的对象,
                    // for(let j = 0; j < trArray.length; j++){
                    //     //如果数组中存在相同的对象，则执行删除
                    //     if(trArray[j].id == trObj.id){
                    //         trArray.splice(j,1);
                    //     }
                    //     //该对象的主键在主键数组中也要一并删除
                    //     if(trData.indexOf(trObj.id) != -1){
                    //         trData.splice(trData.indexOf(trObj.id),1)
                    //     }
                    //
                    // }
                    $.ajax({
                        url: 'isDelete',
                        type: 'POST',
                        dataType: 'JSON',
                        async:false,
                        data: {id:obj.id},
                        success: function (result) {
                            if(result == true){
                                //当点击删除图标时，删除当前的节点。 parent表示当前的tr节点
                                $(parent).remove();
                                //同时删除trArray中对应的该对象和主键数组中对应的主键值
                                //将tr节点转化为对象
                                let trObj =  getObj(parent,columns,true,true,true);
                                // 遍历trArray数组中的对象,
                                for(let j = 0; j < trArray.length; j++){
                                    //如果数组中存在相同的对象，则执行删除
                                    if(trArray[j].id == trObj.id){
                                        trArray.splice(j,1);
                                    }
                                    //该对象的主键在主键数组中也要一并删除
                                    if(trData.indexOf(trObj.id) != -1){
                                        trData.splice(trData.indexOf(trObj.id),1)
                                    }

                                }
                            }else {
                                alert('未完成订单中有此商品，请检查订单');
                                return;
                            }
                        }
                    })

                }

            }
        };
        firstTable(options);



        //给新增供应商物品按钮添加点击事件
        $('[name="addGoods"]').on('click',function () {
            //点击了新增后发送get请求，将请求的页面放到body的后面，并且调用模态框的显示方法
            $.get('addGoodsServlet',function (html) {
                $('body').append(html)
                $('body [data-modal="add"]').modal('show')
            });

        });

        //给模态框中的确认按钮添加点击事件
        $('body').on('click', '.modal-footer [name="thl-submit"]', function () {
            //定义一个临时变量，保存获取主键数组和对象数组
            let trDataTemp = $(this).closest('.modal').data('trData');
            let trArrayTemp = $(this).closest('.modal').data('trArray');

            //如果初始的主键数组的长度为0，则将传入的主键数组赋值给初始数组，否则将传入的主键数组和初始数组去重合并
            if(trData.length == 0){
                trData = trDataTemp;
            } else {
                for(let i = 0; i < trDataTemp.length; i++){
                    let flag = false;
                    for(let j = 0; j < trData.length; j++ ){
                        if(trDataTemp[i] == trData[j]){
                            flag = true;
                            break;
                        }
                    }
                    if(!flag){
                        trData.push(trDataTemp[i]);
                    }
                }
            }


            //如果初始的对象数组的长度为0，则将传入的对象数组赋值给初始数组，否则将传入的对象数组和初始数组去重合并
            if(trArray.length == 0){
                trArray = trArrayTemp;
            } else {
                for(let i = 0; i < trArrayTemp.length; i++){
                    let flag = false;
                    for(let j = 0; j < trArray.length; j++ ){
                        if(trArrayTemp[i].id == trArray[j].id){
                            flag = true;
                            break;
                        }
                    }
                    if(!flag){
                        trArray.push(trArrayTemp[i]);
                    }
                }
            }
            //定义要显示的列名
            let columns = [{field:"id",title:"商品编码"},
                {field:"goodsName",title:"商品名称"},
                {field:"unit", title:"计量单位"}];
            //定义表格的数据
            let options = {
                isPaging: false,
                node: "[name='thl-supplierGoods1']",
                datas: trArray,
                pageVO: {
                    pageIndex:-1,
                    selectObj:undefined
                },
                columns: columns,
                isEdit: true,
                fontAwesome:{ 'fa fa-trash-o':'删除'},
                fontAwesomeClick:{
                    "删除":function (event,obj,node,parent) {
                        $.ajax({
                            url: 'isDelete',
                            type: 'POST',
                            dataType: 'JSON',
                            async:false,
                            data: {id:obj.id},
                            success: function (result) {
                                if(result == true){
                                    //当点击删除图标时，删除当前的节点。 parent表示当前的tr节点
                                    $(parent).remove();
                                    //同时删除trArray中对应的该对象和主键数组中对应的主键值
                                    //将tr节点转化为对象
                                    let trObj =  getObj(parent,columns,true,true,true);
                                    // 遍历trArray数组中的对象,
                                    for(let j = 0; j < trArray.length; j++){
                                        //如果数组中存在相同的对象，则执行删除
                                        if(trArray[j].id == trObj.id){
                                            trArray.splice(j,1);
                                        }
                                        //该对象的主键在主键数组中也要一并删除
                                        if(trData.indexOf(trObj.id) != -1){
                                            trData.splice(trData.indexOf(trObj.id),1)
                                        }

                                    }
                                }else {
                                    alert('未完成订单中有此商品，请检查订单');
                                    return;
                                }
                            }
                        })

                    }
                }
            };
            firstTable(options);

        })




        //给提交修改请求的按钮添加点击事件
        $('.thl-add [name="thl-addSupplier"]').on('click',function () {


            //检查必填项是否为空
            let typeId = $('.thl-add [data-name="typeId"]').val();

            let supplierName = $('.thl-add [data-name="supplierName1"]').val();

            let district = $('.thl-add [data-name="district"]').val();

            let detailAddress = $('.thl-add [data-name="detailAddress"]').val();

            let contactName = $('.thl-add [data-name="contactName"]').val();

            let phone = $('.thl-add [data-name="phone"]').val();

            if(typeId != 0 && supplierName.trim().length > 0 && district.trim().length > 0 && detailAddress.trim().length > 0 && contactName.trim().length > 0 && phone.trim().length > 0){
                //在发送ajax请求前，先获取div里绑定的id
                let id = $('[data-update="thl-update"]').data('id');

                //请求的地址
                let url = 'updateSupplier';
                //发送的数据
                let value = {
                    id: id,
                    typeId : typeId,
                    supplierName : supplierName,
                    pro:$('.thl-add [data-name="pro"]').val(),
                    city:$('.thl-add [data-name="city"]').val(),
                    district : district,
                    detailAddress: detailAddress,
                    contactName: contactName,
                    phone : phone,
                    goodsIdArray: trData
                };
                //发送表单ajax数据
                $.ajax({
                    url: url,
                    type: "POST",
                    data:value,
                    traditional: true,
                    success: function () {
                        //执行ajax请求返回管理供应商界面
                        $('').returnMianbao();
                    },
                    error: function () {
                        //提交失败显示提示信息
                        alert('提交失败了');
                    }
                });

            }else{
                alert("请检查必填项！")
            }

        });

    })()
</script>